<template>
	<view class="page-content">
		<f-navbar title="报警中心" :navbarType="1" :isShowLeft="false">
		</f-navbar>
		<view class="search-block flex align-center">
			<view class="flex-sub search-input flex align-center" v-if="showSearch">
				<u-input border="none" v-model="listParams.receivingVehicle" maxlength="20" fontSize="24rpx" placeholder="搜索"
					placeholderStyle="font-size: 24rpx;color: #CCCCCC;" confirmType="search" @confirm="searchList"  :clearable="true"  @clear="searchClear">
					<template slot="prefix">
						<u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
					</template>
				</u-input>
			</view>
			<view class="flex-sub search-input flex align-center justify-center" @click="switchSearch(true)" v-else>
				<u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
				<text class="margin-left-xs">搜索</text>
			</view>
			<image class="screen-icon" src="@/static/images/common/screen_icon.png" @click="showScreenModal"></image>
		</view>
		<view class="page-content-main">
			<scrollList :list="list" :loadComplete="loadComplete" @pullUpLoad="pullUpLoad" ref="scrollList">
				<view class="list-block">
					<view v-for="(item,index) in list" @click="goLink(`./policeDetail?param=${enCodeUrl(item)}`)">
						<policeItem :item="item" :policeTypeOptions="policeTypeOptions">
							<template slot="optionBtn">
								<view class="margin-left" @click.stop="goLink(`./errorApply?id=${item.id}&taskId=${item.taskId}`)">
									<u-button color="linear-gradient(83deg, #48B453 0%, #2C9F79 100%)"
										:customStyle="{width:'171rpx',height:'63rpx',fontSize:'28rpx',borderRadius:'50rpx'}">消错申请
									</u-button>
								</view>
							</template>
						</policeItem>
					</view>
				</view>
			</scrollList>
		</view>
		<tabbar :tabIndex="2" :isFixed="false"></tabbar>
		<screenModal :screenType="2" ref="screenModal" @setScreenForm="setScreenForm"></screenModal>
	</view>
</template>
<script>
	import policeItem from "@/components/pageLayout/listItem/police-item.vue"
	import tabbar from "@/components/tabbar/index.vue"
	import screenModal from "@/components/pageLayout/screenModal/warehousingScreenModal.vue"
	import {
		getAlarmList
	} from "@/api/police.js"
	export default {
		components: {
			policeItem,
			tabbar,
			screenModal
		},
		data() {
			return {
				showSearch: false,
				listParams: {
					pageNum: 1,
					pageSize: 10,
					receivingVehicle:null,
					status:'', //processingResults 1已处理 0未处理
				},
				list: [],
				loadComplete: true,
				total: 0,
				
				
				policeTypeOptions:[],//报警类型
			};
		},
		onPageScroll(e) {

		},
		onReady() {

		},
		onShow() {
			uni.hideTabBar()
			this.listParams.status = uni.getStorageSync('status')
			this.listParams.receivingVehicle = ''
			this.switchSearch(false)
			
			this.listParams.pageNum = 1
			this.getList()
		},
		onLoad(option) {
			this.getDictData();
		},
		onHide() {
			uni.setStorageSync('status', '');
		},
		methods: {
			async getDictData() {
				// getDictionaryName(policeTypeOptions,item.alarmType)
				this.policeTypeOptions = await this.getDictionaryData('police_type');
			},
			switchSearch(value) {
				this.showSearch = value
			},
			changeTab(e) {
				this.tabIndex = e.index
				this.searchList()
			},
			searchList(){
				this.listParams.pageNum = 1
				this.getList()
			},
			searchClear(){
				this.listParams.receivingVehicle = ''
				this.listParams.pageNum = 1
				this.getList()
			},
			getList() {
				// 报警类型 police_type  alarmType
				getAlarmList(this.listParams).then((res) => {
					this.$refs.scrollList.pullUpDone(!1)
					if (this.listParams.pageNum == 1) {
						this.list = res.data.records
						this.loadComplete = !0
					} else {
						if (this.list.length == res.data.total) {
							this.$refs.scrollList.pullUpDone(!0)
						} else {
							this.list = [...this.list, ...res.data.records]
						}
					}
				})
			},
			pullUpLoad() {
				this.listParams.pageNum++;
				this.getList();
			},
			showScreenModal() {
				this.$refs.screenModal.showModal();
			},
			setScreenForm(form) {
				this.listParams = {
					...this.listParams,
					...form
				}
				this.searchList()
			}
		},
	};
</script>
<style lang="scss" scoped>
	.page-content {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.search-block {
			padding: 32rpx;
			background: #f7f7f7;

			.search-input {
				height: 58rpx;
				background: #FFFFFF;
				border-radius: 50rpx;
				font-size: 28rpx;
				color: #CCCCCC;
				padding: 0 20rpx;
			}

			.screen-icon {
				width: 50rpx;
				height: 50rpx;
				margin-left: 24rpx;
			}
		}

		&-main {
			position: relative;
			flex: 1;
			overflow: hidden;

			.list-block {
				padding: 0 32rpx;
			}

		}
	}
</style>